Percepción de canales de color

Color

IIC2026

Definiendo colores en D3.js en base a modelos

const color = d3.color("rgb(10%, 20%, 30%)");

const color = d3.color("hsl(120, 50%, 20%)");

Rojo, verde y azul como canales

Saturación y luminancia

CIELAB y CIELUV

Espacios de color que buscan representar más fielmente las diferencias perceptuales entre colores.

Distancia númerica bajo estos modelos es similar a diferencia perceptual.

Interpolación de D3.js

const funcion = d3.interpolateRgb("rgb(0, 100, 0)", "rgb(100, 0, 100)");
console.log(funcion(0.5)); // "rgb(50, 50, 50)"

const funcion = d3.interpolateLab("rgb(0, 100, 0)", "rgb(100, 0, 100)");
console.log(funcion(0.5)); // "rgb(77, 67, 61)"	

Luminancia

• Canal de magnitud, apropiado para atributos ordenados.


• El contraste con colores próximos desvirtua su percepción.


• Se recomiendan menos de cuatro pasos discriminables para regiones no contiguas.

Luminancia y contraste

(Fuente imagen: Programming Design Systems )

Saturación

• Canal de magnitud, apropiado para atributos ordenados.


• El contraste con colores próximos desvirtua su percepción.


• Se recomiendan pocos pasos discriminables para regiones no contiguas.

Saturación y área

Matiz

• Muy efectivo como canal de identidad y es apropiado para atributos categóricos.


• El contraste con colores próximos desvirtua su percepción.


• Tienes varios pasos de discriminalidad, desde 6 a 12.


• Eventualmente puede usarse sobre datos ordenados, pero no es muy intuitivo.

Percepción de canales de color

Color

IIC2026

¡Deja tus preguntas en los comentarios!